<template>
	<div>
		<div class="bg-white p-[40px]">
			<el-row>
				<el-col :span="6" class="main-color v-flex">
					<span>角色名称：</span>
					<el-input class="flex-1 ml-[10px]" placeholder="请输入角色名称"></el-input>
				</el-col>
			</el-row>
			<el-row class="mt-[30px]">
				<el-col :span="6" class="main-color v-flex">
					<span>是否开启：</span>
					<el-radio-group v-model="radio" class="ml-4">
						<el-radio label="1" size="large">开启</el-radio>
						<el-radio label="2" size="large">禁用</el-radio>
					</el-radio-group>
				</el-col>
			</el-row>
			<el-row class="mt-[30px]">
				<el-col :span="6" class="main-color v-flex v-col-top">
					<span>权限：</span>
					<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
						:default-checked-keys="[5]" :props="defaultProps" />
				</el-col>
			</el-row>
			<el-button class="w-[320px] h-[48px] mt-[30px]" color="#0256A7" type="primary">提交</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
	const radio = ref('1')
	const defaultProps = {
	  children: 'children',
	  label: 'label',
	}
	const data = [
	  {
	    id: 1,
	    label: '系统设置',
	    children: [
	      {
	        id: 4,
	        label: 'Level two 1-1',
	      },
	    ],
	  },
	  {
	    id: 2,
	    label: '平台管理',
	    children: [
	      {
	        id: 5,
	        label: 'Level two 2-1',
	      },
	      {
	        id: 6,
	        label: 'Level two 2-2',
	      },
	    ],
	  },
	  {
	    id: 3,
	    label: '用户管理',
	    children: [
	      {
	        id: 7,
	        label: 'Level two 3-1',
	      },
	      {
	        id: 8,
	        label: 'Level two 3-2',
	      },
	    ],
	  },
	]
</script>

<style scoped>
	:deep() .el-input__inner {
		color: var(--el-text-color-main);
	}
</style>